import classNames from 'classnames';
import { format } from 'date-fns';
import { useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { useParams, useLocation } from 'react-router-dom';
import BackButton from 'src/component/BackButton';
import Button from 'src/component/Button';
import ConfirmReceiptModal from 'src/component/ConfirmReceiptModal';
import Image from 'src/component/Image';
import { ThemeContext } from 'src/context/ThemeContext';
// import { Fill } from 'src/model/Order';
import { openSnackbar } from 'src/redux/uiSlice';
// import { confirmFill, getFillById } from 'src/service/orderService';
import { updateOrder } from 'src/service/orderService';
import { bnFormat } from 'src/util/bigNumber';
import style from './OrderAskDetail.module.scss';

type Fill = any
type TradingForm = any

const OrderAskDetail = () => {

  const { t } = useTranslation();
  const location = useLocation();
  const { orderId } = useParams();
  const { IcSearch } = useContext(ThemeContext).image;
  const dispatch = useDispatch();
  const [receiptUrl, setReceiptUrl] = useState<string>();
  const [fill, setFill] = useState<Fill>();
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [isSee, setIsSee] = useState<boolean>(true);
  const state = location.state as (TradingForm) | null;
  const token = localStorage.getItem("token")
  useEffect(() => {
    updateFill();
  }, [orderId]);

  const updateFill = () => {
    if (orderId === undefined) return;
    // getFillById(orderId)
    //   .then((res) => {
    //     setFill(res);
    //   })
    //   .catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
  };

  const onCheckReceipt = (value: Fill) => {

    if (!value.FAttachment) return;
    let url = "https://918admin.bit-otc.com" + value.FAttachment
    setReceiptUrl(url);
  };

  const onOrderConfirmAction = () => {
    setIsOpen(true);
  };

  const onConfirmFill = (tfaCode: string) => {
    if (state === undefined) return;
    setIsOpen(false);
    updateOrder({
      FID: state.FID,
      token: token
    }).then(res => {
      if (res.success) setIsSee(false)
      else dispatch(openSnackbar({ message: res.message, severity: 'alert' }))
    })


    // confirmFill(fill.id, tfaCode)
    //   .then(() => {
    //     updateFill();
    //   })
    //   .catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
  };

  // if (fill === undefined) return <div />;

  return (
    <div className={style.self}>
      <BackButton />
      <div className={style.head}>订单{state?.FID}</div>
      <div className={style.content}>
        <div className={style.top}>
          <div className={style.block}>
            <div className={style.item}>
              <div className={style.title}>{"状态"}</div>
              <div className={classNames(style.valueItem, style.status)}>
                {state?.FState}<br />
                {state.FReason ? state.FReason : ""}
              </div>
            </div>
            <div className={style.item}>
              <div className={style.title}>生成时间</div>
              <div className={style.valueItem}>
                {format(Date.parse(state?.FAddtime), 'yyyy/MM/dd HH:mm:ss')}
              </div>
            </div>
            <div className={style.item}>
              <div className={style.title}>数量</div>
              <div className={style.valueItem}>
                {bnFormat(state?.FQuantity) + ' ' + "USDT"}
              </div>
            </div>
            <div className={style.item}>
              <div className={style.title}>单价</div>
              <div className={style.valueItem}>
                {/* {bnFormat(state?.FPrice) + ' ' + "CNY"} */}
                {state?.FPrice + ' ' + "CNY"}
              </div>
            </div>
            <div className={style.item}>
              <div className={style.title}>金额</div>
              <div className={style.valueItem}>
                {bnFormat(state?.FCNY) + ' ' + "CNY"}
              </div>
            </div>
          </div>
          <div className={style.divider} />
        </div>
        <div className={style.payment}>
          <div className={style.title}>{"我的收款方式"}</div>
          <div className={style.bank}>
            <div>{state?.FBHm}</div>
            <div>{state?.FBMc}</div>
            <div>{state?.FBZh}</div>
            <div className={style.location}>
              <div>{state?.FBCs}</div>
              <div>{state?.FBSf}</div>
            </div>
            <div>{state?.FBFy}</div>
          </div>
        </div>
        <div className={classNames(style.buttons)}>
          {state?.FState == '已付款待确认' || state?.FState == '已查收放币' && (
            <div>
              <div className={style.checkout} onClick={() => onCheckReceipt(state)}>
                检视回单
                <img src={IcSearch} />
              </div>
              <div>{format(Date.parse(state?.FAttachmentTime ?? ''), 'yyyy/MM/dd HH:mm:ss')}</div>
            </div>
          )}
          {state?.FState == '已付款待确认' && isSee && (
            <Button appearance="secondary" size="small" onClick={() => onOrderConfirmAction()}>
              查收放币
            </Button>
          )}
        </div>

      </div>
      {receiptUrl && (
        <Image open={true} src={receiptUrl} onClose={() => setReceiptUrl(undefined)} />
      )}
      <ConfirmReceiptModal
        open={isOpen}
        onClose={() => setIsOpen(false)}
        onSubmit={onConfirmFill}
      />
    </div>
  );
};

export default OrderAskDetail;
